<template>
    <el-autocomplete popper-class="my-autocomplete" v-model="selectedValue" :fetch-suggestions="querySearch"
        placeholder="商铺完整编号" @select="handleSelect" clearable>
        <i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClick">
        </i>
        <template slot-scope="{ item }">
            <div class="name">编号：{{ item.value }}</div>
            <span class="addr">状态：{{ item.label }}</span>
        </template>
    </el-autocomplete>
</template>

<script>
import { listShops } from "@/api/asset/shops";
export default {
    data() {
        return {
            selectList: [],
            restaurants: [],
            selectedValue: "",
            codeName: '',
            stateName: '',
        }
    },
    mounted() {
        this.restaurants = this.loadAll();
    },
    methods: {
        //完整编号code查询
        querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            if (!queryString) {
                return cb([]);
            } else {
                cb(results);
            }
        },
        createFilter(queryString) {
            return (restaurant) => {
                return restaurant.value.toLowerCase().includes(queryString.toLowerCase());
            };
        },
        loadAll() {
            return this.selectList;
        },
        handleSelect(item) {
            console.log(item);
        },
        handleIconClick(ev) {
            console.log(ev);
        },
        getList() {
            this.selectList = [];
            listShops().then(response => {
                let shopsList = response.rows;
                //处理模糊查询完整编号
                for (let it of shopsList) {
                    // this.codeName='编号：'+it.code
                    this.codeName = it.code
                    if (it.state == 0) {
                        this.stateName = '空置'
                    } else if (it.state == 1) {
                        this.stateName = '出租'
                    } else {
                        this.stateName = '出售'
                    }
                    this.selectList.push({
                        value: this.codeName,
                        label: this.stateName
                    })
                }
                // });
            });

        },
    }
}
</script>

<style></style>